<template>
  <el-dialog
    class="abow-dialog"
    :visible.sync="visible"
    :title="!bannerId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="650px"
    @close="closeFn"
  >
    <el-dialog
      class="innerDialog"
      v-dialogDrag
      width="650px"
      :title="innerTitle + '  ' + innerTitleType"
      :visible.sync="innerCoverVisible"
      append-to-body
    >
    </el-dialog>
    <el-form
      class="form"
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="160px"
      size="medium"
      :inline="false"
      labelSuffix="："
    >
      
  
      <el-form-item  label="级别">
        <el-radio v-model="radiofuzi" label="1">父级标签</el-radio>
        <el-radio v-model="radiofuzi" label="2">子级标签</el-radio>
      </el-form-item>

      <el-form-item v-if="radiofuzi=='2'"  label="选择父级">
        <el-select v-model="fuvalue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item prop="name" label="标签名称">
        <el-input clearable v-model="dataForm.name" placeholder="标签名称" />
      </el-form-item>
      <el-form-item prop="sort" label="排序">
        <el-input clearable v-model="dataForm.sort" placeholder="排序" />
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{
        $t("views.public.cancel")
      }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("views.public.confirm")
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
let that;
import { debounce, get } from "lodash";

import uploadTools from "./uploadTools";
export default {
  mixins: [uploadTools],
  data() {
    return {
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      fuvalue: '',
      radiofuzi:"1",
      bannerId: null,
      appletList: [],
      clickImg: "",
      innerTitle: "",
      innerTitleType: "",
      innerCoverVisible: false,
      status: [
        {
          value: 0,
          label: "禁用",
        },
        {
          value: 1,
          label: "正常",
        },
      ],
      visible: false,
      deptList: [],
      deptListVisible: false,
      fullscreenLoading: false,
      roleList: [],
      roleIdListDefault: [],
      dataForm: {
        name: "", //标签名称
		parent_id:0,
        sort: 1, //排序
      },
    };
  },
  created() {
    this.getparentTagList()
  },
  mounted() {
    that = this;
  },
  computed: {
	// radiofn:{
	// 	get(){
			
	// 	},
	// 	set(){
			
	// 	}
	// 	// if(this.parent_id==0){
	// 	// 	console.log(132)
	// 	// 	return "1"
	// 	// }else{
	// 	// 	console.log(135)
	// 	// 	return "2"
	// 	// }
	// },
    dataRule() {
      return {
        name: [
          {
            required: true,
            message: "名称不能为空!",
            trigger: ["blur", "change"],
          },
        ],

        sort: [
          {
            required: true,
            message: "排序不能为空！",
            trigger: ["blur", "change"],
          },
        ],
      };
    },
  },
  methods: {
    async getparentTagList(){
      let res = await this.$axios.get("/api/common/parentTag")
      this.options  = res
      this.fuvalue = res[0].value
      console.log(151,res)
    },
    closeFn() {
      this.$refs.dataForm.resetFields();
    },
    lookImg(clickImg, type) {
      this.clickImg = clickImg;
      this.innerTitleType = type || "";
      this.innerCoverVisible = true;
    },

    uploadBtnFn(fileBtn, field) {
      this.field = field;
      this.$refs[fileBtn].click();
    },
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields();
		this.radiofuzi="1"
		this.fuvalue=''
      });
	 //  this.dataForm={
		// name: "", //标签名称
		// parent_id:0,
		// sort: 1, //排序
	 //  }
    },
    update(row) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields();
        this.dataForm = Object.assign({}, row);
		if(this.dataForm.parent_id==0){
			this.radiofuzi = '1'
		}else{
			this.radiofuzi = '2'
			this.fuvalue = this.dataForm.parent_id
		}
      });
    },

    // 所属部门树, 选中
    deptListTreeCurrentChangeHandle(data, node) {
      this.dataForm.deptId = data.deptId;
      this.dataForm.deptName = data.name;
      this.deptListVisible = false;
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        console.log("表单提交");
        this.$refs.dataForm.validate((valid) => {
          console.log(valid + "--+++++-----------");
          if (!valid) {
            return false;
          }
          let dataForm = this.dataForm
            if(this.radiofuzi=='1'){
              dataForm.parent_id = 0
            }else{
              dataForm.parent_id = this.fuvalue
            }     
          console.log(205,dataForm);
          // console.log(200,this.radiofuzi)
          // console.log(201,this.fuvalue)
		  dataForm.sort = Number(dataForm.sort)
          this.$axios
            .post(
              this.bannerId
                ? `/api/playlet/tag/update/${this.bannerId}`
                : "/api/playlet/tag/create",
              dataForm
            )
            .then((res) => {
              this.$message({
                message: this.$t("views.public.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch(() => {});
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),
  },
};
</script>

<style lang="scss" scoped>
.form {
  width: 540px;
}
</style>